<template>
  <div class="wrapper">
    <div class="row">
      <div class="col-sm-12">
        <section class="panel">
          <header class="panel-heading">
            会员列表
                    <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                      <!--<a href="javascript:;" class="fa fa-times"></a>-->
                     </span>
          </header>
          <div class="panel-body">
            <div class="adv-table editable-table ">
              <div class="row" style="margin-bottom:10px">
                <div class="col-lg-4 col-sm-3">
                  <div class="dataTables_length">
                    <label> <select v-model="page.size" class="form-control" size="1">
                      <option v-for="num in page.sizeNum" v-bind:value="num.key">{{num.value}}</option>
                    </select> 页数</label>
                  </div>
                </div>
                <div class="col-lg-4 col-sm-6"></div>
                <div class="col-lg-4 col-sm-3">
                  <div class="dataTables_length">
                    <button style="margin-left:5px" class="btn btn-default pull-right" data-toggle="button">
                      <i class="fa fa-refresh"></i>
                    </button>
                    <button style="margin-left:5px" class="btn btn-default pull-right" data-toggle="button">
                      <i class="fa fa-plus"></i>
                    </button>
                  </div>
                </div>
              </div>
              <table class="table table-striped table-hover table-bordered dataTable">
                <thead>
                <tr role="row">
                  <th>ID</th>
                  <th>用户名</th>
                  <th>邮箱</th>
                  <th>头像</th>
                  <th>电话</th>
                  <th>状态</th>
                  <th>注册时间</th>
                  <th>最后登陆时间</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="list in table" class="odd">
                  <td>{{list.id}}</td>
                  <td>{{list.user_name}}</td>
                  <td>{{list.user_email}}</td>
                  <td class=" prog-avatar"><img v-bind:src="list.user_img"/></td>
                  <td>{{list.user_mobile}}</a></td>
                  <td>{{list.status}}</a></td>
                  <td>{{list.create_time}}</a></td>
                  <td>{{list.last_time}}</a></td>
                  <td>Delete</a></td>
                </tr>
                </tbody>
              </table>
              <div class="row" style="margin-bottom:10px">
                <div class="col-lg-6 col-sm-6">
                  <p> 共{{page.count}}条数据</p>
                </div>
                <div class="col-lg-6 col-sm-6">
                  <div class="block pull-right" >
                    <el-pagination
                      @current-change="handleCurrentChange"
                      layout="prev, pager, next"
                      :page-size="page.size"
                      :total="page.count">
                    </el-pagination>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </section>
    </div>
  </div>
  </div>
</template>
<style lang='sass'>
  .prog-avatar img{
    width:100%;
    border-radius:50%;
    -webkit-border-radius:50%;
  }
  .prog-avatar{
    width:60px;
    height:60px;
  }
  .page li{
    color:black;
    padding:5px 10px;
    display:inline-block;
    margin:0 1px;
    border:1px solid #dddddd;
    list-style:none;
  }
  .page .current{
    color:#ffffff;
    background:#2e62ce;
    text-decoration:none;
  }
  .page .disabled{
    color:#c7c7c7
  }

</style>
<script>
  export default{
    data(){
      return {
        table: [],
        page: {
          count: 0,
          page: 1,
          size: 10,
          sizeNum: [ {
            key: 1,
            value: 1
          }, {
            key: 5,
            value: 5
          }, {
            key: 10,
            value: 10
          }, {
            key: 20,
            value: 20
          }, {
            key: 30,
            value: 30
          } ],
        }
      }
    },
    mounted: function(){
      this.load.loading( true )
      this.getUsers();
      this.getCount();
    },
    created:function(){
    },
    updated: function(){
      console.log(11);
      this.load.loading(false);
      this.load.loading2(false,'' )
    },
    methods: {
      getUsers: function(){
        this.$http.post( '/admin/user/gets', this.page ).then( function( response ){
          if( response.data.status ){
            this.table = response.data.data
          }
        }, function( response ){
        } ).bind( this );
      },
      getCount(){
        this.$http.post( '/admin/user/count' ).then( function( response ){
          if( response.data.status ){
            this.page.count = response.data.data
          }
        }, function( response ){
        } ).bind( this );
      },


      handleCurrentChange(val) {
        this.load.loading2(true,'加载中......' )
        this.page.page=val;
        this.getUsers();
      }
    }
  }
</script>